<template>
  <!-- 人气美食 -->
  <div>
    <TopNav v-if="$route.query.id == 2">
      <div class="div-top">人气美食</div>
    </TopNav>
    <TopNav v-if="$route.query.id == 1">
      <div class="div-top">美食列表</div>
    </TopNav>
    <inputNav></inputNav>
    <div class="qwe" v-for="m in menuNav" :key="m.id">
      <router-link :to="{ name: m.name, query:{id:m.id} }">
        <img class="img2" :src="m.img" alt="" /></router-link>
      <div class="qwe-1">
        <div class="qwe-top">
          <span>{{ m.label }}</span>
          <img class="img2" src="../assets/商户@3x.png" alt="" />
        </div>
        <div class="qwe-concent">{{ m.site }}</div>
        <div class="qwe-bottom">
          <span>{{ m.span }}</span>
          <a>{{ m.money }}</a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getFood } from '@/api/home';

export default {
  data() {
    return {
      menuNav: [],
    };
  },
  created() {
    this.getFood();
  },
  methods: {
    async getFood() {
      const { data } = await getFood();
      this.menuNav = data;
    },
  },
};
</script>

<style lang="scss" scoped>
.div-top {
  font-size: 17px;
  color: #333333;
  letter-spacing: 0;
  text-align: center;
  line-height: 44px;
}

.qwe {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  width: 345px;
  height: 120px;
  margin: 0 auto;
  margin-top: 10px;
  margin-bottom: 20px;

  .img2 {
    width: 90px;
    height: 90px;
  }

  .qwe-1 {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-left: 10px;
    height: 90px;
    width: 204px;

    .qwe-top {
      span {
        font-size: 17px;
        color: #333333;
      }

      img {
        width: 34px;
        height: 16px;
      }
    }

    .qwe-concent {
      font-size: 12px;
      color: #bbbbbb;
    }

    .qwe-bottom {
      span {
        font-size: 12px;
        color: #333333;
      }

      a {
        color: #e52f17;
        font-size: 17px;
      }
    }
  }
}
</style>
